<!--preview.vue-->
<template>
    <div class="preview">
      <div style="flex-grow:1;">
        <Row class="margin-top-20" style="height: 100%">
          <Col span="12" offset="5">
          <div>
            <Card>
              <h1>{{ articleTitle }}</h1>
              <p class="preview-publish-time"><Icon type="android-alarm-clock"></Icon>&nbsp;发布时间：{{ publishTime }}</p>
              <div class="preview-tags-con">
                <b class="preview-tip"><Icon type="ios-pricetags-outline"></Icon>&nbsp;标签：</b><Tag v-for="item in tagsList" type="border" color="blue" :key="item">{{ item }}</Tag>
              </div>
              <div class="preview-content-con" v-html="content"></div>
              <div class="preview-classifition-con">
                <b class="preview-tip"><Icon type="navicon-round"></Icon>&nbsp;目录：</b>
                <a class="preview-classifition-item" v-for="item in classificationSelected" :key="item">
                  <Icon type="android-folder-open"></Icon>
                  {{ item }}
                </a>
              </div>
            </Card>
          </div>
          <!--sdfsdafsdf-->
          </Col>
          <Col span="4" class="padding-left-10">

          <div>
            <Card>
              <p slot="title">
                <Icon type="paper-airplane"></Icon>
                热门文章
              </p>
              <div class="preview-placeholderCon">
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
              </div>
            </Card>
          </div>

          <div class="margin-top-10">
            <Card>
              <p slot="title">
                <Icon type="paper-airplane"></Icon>
                最新文章
              </p>
              <div class="preview-placeholderCon">
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
                <div class="preview-placeholder"></div>
              </div>
            </Card>
          </div>
          </Col>
        </Row>
      </div>
    </div>
</template>

<script>
    export default {
        name: 'preview',

        data() {
            return {}
        },

        components: { //模板

        },

        computed: { //计算属性

        },

        methods: { //方法

        },
        beforeCreate: function () {
            console.log('1-beforeCreate 初始化之后');
        },
        created: function () {
            console.log('2-created 创建完成');
        },
        beforeMount: function () {
            console.log('3-beforeMount 挂载之前');
        },
        mounted: function () {
            console.log('4-mounted 被创建');
        },
        beforeUpdate: function () {
            console.log('5-beforeUpdate 数据更新前');
        },
        updated: function () {
            console.log('6-updated 被更新后');
        },
        activated: function () {
            console.log('7-activated');
        },
        deactivated: function () {
            console.log('8-deactivated');
        },
        beforeDestroy: function () {
            console.log('9-beforeDestroy 销毁之前');
        },
        destroyed: function () {
            console.log('10-destroyed 销毁之后')
        }
    }
</script>
<style lang='less' scoped>
  @import "./common.less";
  .preview {
    &-header {
      padding-right: 20px;
      height: 60px;
      background: #4a5161;
      text-align: right;
      ul {
        display: inline-block !important;
      }
    }
    &-placeholderCon {
      height: 200px;
    }
    &-placeholder {
      height: 40px;
      margin-bottom: 10px;
      background: #9fafd4;
      border-radius: 3px;
    }
    &-tags-con {
      padding: 5px 0;
      margin: 10px 0;
    }
    &-tip {
      font-size: 12px;
      color: #c3c3c3;
    }
    &-content-con {
      border-top: 1px solid #edeff1;
      border-bottom: 1px solid #edeff1;
      padding: 12px 0 20px;
      margin-bottom: 20px;
    }
    &-classifition-con {
      padding: 5px 0;
    }
    &-classifition-item {
      margin-right: 8px;
    }
    &-publish-time {
      font-size: 12px;
      color: gray;
      margin-top: 5px;
    }
  }
</style>
